import { HOME_METADATA } from '@/lib/utils/metadata';
import { VideoService } from '@/lib/video/video-service';
import { Metadata } from "next";
import Carousel from '@/app/components/video-list/carousel';
import CategorySection from '@/app/components/video-list/category-section';

// 使用统一管理的首页元数据
export const metadata: Metadata = HOME_METADATA;


export const revalidate = 300;

export default async function Home() {
  // 获取首页数据，所有查询现在都使用React cache，会自动去重
  const [carouselVideos, newestVideos, hotVideos, topRatedVideos] = await Promise.all([
    VideoService.getCarouselVideos(5),
    VideoService.getNewestVideos(12),
    VideoService.getHotVideos(12),
    VideoService.getTopRatedVideos(12),
  ]);

  return (
    <div className="container mx-auto px-3 sm:px-6 md:px-8 lg:px-12 xl:px-20 2xl:px-24 py-3 pb-6 sm:pb-8 max-w-full overflow-x-hidden">
      <div className="mt-10 md:mt-2">
        {/* 轮播图 - 实现沉浸式导航 */}
        {/* <div className="relative -mx-6 sm:-mx-8 md:-mx-12 lg:-mx-24 xl:-mx-32 2xl:-mx-36"> */}
        <div className="relative -mx-3 max-sm:-mt-1 sm:mx-0 sm:rounded-xl overflow-hidden shadow-lg">
          <Carousel videos={carouselVideos} />
          {/* 轮播图底部渐变阴影 */}
          <div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-gray-900 to-transparent rounded-none sm:rounded-xl"></div>
        </div>

        {/* 内容区域 */}
        <div className="relative z-10 mt-6 max-sm:px-2">
          {/* 最新上线 */}
          <CategorySection title="最新上线" moreLink="/newest" videos={newestVideos} />

          {/* 热门榜单 */}
          <CategorySection title="热门榜单" moreLink="/rank" videos={hotVideos} />

          {/* 高分佳作 */}
          <CategorySection title="高分佳作" moreLink="/top-rated" videos={topRatedVideos} />
        </div>
      </div>
    </div>
  );
}
